<!DOCTYPE html>
<html lang="en">
<head>
<title>DEMO SOCIAL NETWORK</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href='https://plus.google.com/104093787575230359634' rel='author'/>
<meta content='eX4aetTb1bRMfPFenBkl0DNG0nVF8c4j_EAsagbcrXE' name='google-site-verification'/>
<meta content='CED76A8C706DF43769EF018E0DAE616A' name='msvalidate.01'/>
<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css"/>
<style>
body{color:#000305;font-size:87.5%;font-family:Arial,'Lucida Sans Unicode';line-height:1.5;text-align:left;background-color:#D8D8D8}
a{text-decoration:none}
a:link,a:visited{color:#CF5C3F}
a:hover,a:active{color:#A65615}
header h1{margin:2% 0 0;text-align:center;background:#333;color:#1ba29a;font-size:400%;font-family:impact;padding:20px 0;border-radius:5px 5px 0 0}
h2{margin:0;border-bottom:1px solid #f1f1f1;padding-bottom:10px;color:#CF5C3F}
.mainFooter a{color:#3CC6AB}
.mainFooter a:hover{color:#E95C4E}
.body{margin:0 auto;width:70%;clear:both}
.body{width:70%;font-size:95%}
.mainHeader nav{background-color:#666}
.mainHeader nav ul{list-style:none;margin:0 auto}
.mainHeader nav ul li{float:left;display:block}
.mainHeader nav a:link,.mainHeader nav a:visited{color:#FFF;display:block;height:30px}
.mainHeader nav{height:30px}
.mainHeader nav ul{padding-left:0}
.mainHeader nav ul li{width:50%;text-align:center}
.mainHeader nav a:hover,.mainHeader nav a:active,.mainHeader nav .active a:link,.mainHeader nav .active a:visited{background-color:#1BA29A;text-shadow:none}
.mainContent{line-height:25px;border-radius:5px}
.content{width:70%;float:left}
.innercontent{background-color:#FFF;border-radius:5px;padding:3% 5%;margin-top:2%;text-align:justify}
.mainFooter{width:100%;float:left;border-radius:5px;background-color:#333;margin:0 0 2% 0}
.mainFooter p{width:92%;margin:10px auto;color:#FFF;text-align:center;padding:10px}
.body{width:70%;font-size:95%}
.mainHeader nav{height:30px}
.mainHeader nav ul{padding-left:0}
.mainHeader nav ul li{width:50%;text-align:center}
.mainHeader nav a:link,.mainHeader nav a:visited{line-height:30px;display:block}
.content{width:100%;float:left}
.innercontent{padding:3% 5%;margin-top:2%;margin-bottom:2%}
.sc-network,.sc-ntwork{display:inline-block;width:100%;margin-top:1%}
.sc-ntwork a{background:#666}
.versi2 a{border-radius:5px}
.versi3 a{border-radius:100%}
.versi4 a{border-radius:15px 0px 15px}
.hover a:hover{border-radius:100%;transition:all 1s ease}
.hover2 a:hover{border-radius:15px 0px 15px;transition:all 1s ease}
.hover3 a:hover{border-radius:0;transition:all 1s ease}
.hover4 a:hover{border-radius:5px;transition:all 1s ease}
/* --------------------------Widget--------------------------- */
.sc-network a,.sc-ntwork a{color:#fff;width:50px;height:50px;display:block;margin:2px;text-align:center;float:left;font-size:40px}
.sc-network a:hover,.sc-ntwork a:hover{opacity:0.5}
.sc-network i,.sc-ntwork i{line-height:50px}
.fac{background:#3B5998}.twi{background:#39A9E0}.gog{background:#D14836}.rss{background:#FF8300}.yut{background:#CD332D}.lin{background:#007FB1}.git{background:#4183C4}.pin{background:#CB2027}.ins{background:#3F729B}.fli{background:#0063DB}.tum{background:#2C4762}.stu{background:#EB4924}.dig{background:#14589E}.red{background:#FF4500}.dri{background:#EA4C89}.wor{background:#21759B}.vim{background:#4BF}.del{background:#3274D1}.dev{background:#4B5D50}.and{background:#A4C639}.apl{background:#B9BFC1}.sky{background:#00AFF0}.eml{background:#888}.jsf{background:#4679A4}.cdp{background:#000}.drp{background:#3277E3}.ht5{background:#E44D26}.cs3{background:#1572B6}.dru{background:#2AA9E0}.jom{background:#000}
</style>
</head>
<body class="body">
<header class="mainHeader">
<h1>SOCIAL NETWORK</h1>
	<nav><ul>
		<li><a href="http://mas-andes.blogspot.com"><i class="fa fa-home"></i> Home</a></li>
		<li><a href="http://mas-andes.blogspot.com/2015/02/css-icon-social-network-flat-ui.html">Tutorial <i class="fa fa-play-circle"/></i></a></li>
	</ul></nav>
</header>
<div class="mainContent">
	<div class="content">
		<article class="innercontent">
				<h2>Social Network V.1</h2>
			<div>
<div class="sc-network">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
		<article class="innercontent">
				<h2>Social Network V.2</h2>
			<div>
<div class="sc-network versi2">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
		<article class="innercontent">
				<h2>Social Network V.3</h2>
			<div>
<div class="sc-network versi3">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
		<article class="innercontent">
				<h2>Social Network V.4</h2>
			<div>
<div class="sc-network versi4">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
		<article class="innercontent">
				<h2>Social Network V.1 - With Hover Effect</h2>
			<div>
<div class="sc-network hover">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
		<article class="innercontent">
				<h2>Social Network V.2 - With Hover Effect</h2>
			<div>
<div class="sc-network versi2 hover2">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
		<article class="innercontent">
				<h2>Social Network V.3 - With Hover Effect</h2>
			<div>
<div class="sc-network versi3 hover3">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
		<article class="innercontent">
				<h2>Social Network V.4 - With Hover Effect</h2>
			<div>
<div class="sc-network versi4 hover4">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
		<article class="innercontent">
				<h2>Social Network V.5</h2>
			<div>
<div class="sc-ntwork">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
		<article class="innercontent">
				<h2>Social Network V.6</h2>
			<div>
<div class="sc-ntwork versi3">
<a class="fac" href="#" title="Like On Facebook"><i class="fa fa-facebook"></i></a>
<a class="twi" href="#" title="Follow On Twitter"><i class="fa fa-twitter"></i></a>
<a class="gog" href="#" title="View Google+ Profile"><i class="fa fa-google-plus"></i></a>
<a class="rss" href="#" title="Subscribe to RSS Feed"><i class="fa fa-rss"></i></a>
<a class="yut" href="#" title="Visit YouTube Channel"><i class="fa fa-youtube"></i></a>
<a class="lin" href="#" title="Connect On Linked In"><i class="fa fa-linkedin"></i></a>
<a class="git" href="#" title="Visit Github Profile"><i class="fa fa-github"></i></a>
<a class="pin" href="#" title="Follow On Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="ins" href="#" title="Follow On Instagram"><i class="fa fa-instagram"></i></a>
<a class="fli" href="#" title="Follow On Flickr"><i class="fa fa-flickr"></i></a>
<a class="tum" href="#" title="Follow On Tumblr"><i class="fa fa-tumblr"></i></a>
<a class="stu" href="#" title="Follow On Stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a class="dig" href="#" title="Follow On Digg"><i class="fa fa-digg"></i></a>
<a class="red" href="#" title="Follow On Reddit"><i class="fa fa-reddit"></i></a>
<a class="dri" href="#" title="Follow On Dribbble"><i class="fa fa-dribbble"></i></a>
<a class="wor" href="#" title="View WordPress.org Profile"><i class="fa fa-wordpress"></i></a>
<a class="vim" href="#" title="Visit Vimeo Channel"><i class="fa fa-vimeo-square"></i></a>
<a class="del" href="#" title="Follow On Delicious"><i class="fa fa-delicious"></i></a>
<a class="dev" href="#" title="Deviant Art Profile"><i class="fa fa-deviantart"></i></a>
<a class="and" href="#" title="Apps For Android"><i class="fa fa-android"></i></a>
<a class="apl" href="#" title="Apps For Apple"><i class="fa fa-apple"></i></a>
<a class="sky" href="#" title="Contact On Skype"><i class="fa fa-skype"></i></a>
<a class="eml" href="#" title="Send An Email"><i class="fa fa-envelope-o"></i></a>
<a class="jsf" href="#" title="Visit JSFiddle Profile"><i class="fa fa-jsfiddle"></i></a>
<a class="cdp" href="#" title="Visit CodePen Profile"><i class="fa fa-codepen"></i></a>
<a class="drp" href="#" title="Visit Dropbox Profile"><i class="fa fa-dropbox"></i></a>
<a class="ht5" href="#" title="Check HTML5 Validation"><i class="fa fa-html5"></i></a>
<a class="cs3" href="#" title="Check CSS3 Validation"><i class="fa fa-css3"></i></a>
<a class="dru" href="#" title="Visit Drupal Profile"><i class="fa fa-drupal"></i></a>
<a class="jom" href="#" title="Visit Joomla Profile"><i class="fa fa-joomla"></i></a>
</div>
				</div>
		</article>
	</div>
</div>
<footer class="mainFooter">
	<p>Copyright &copy 2015 | <a href="http://mas-andes.blogspot.com" title="Blog Mas Andes">Blog Mas Andes</a>
	<br/><a href="#"><i class="fa fa-arrow-circle-up"></i> Back To Top</a></p>
</footer>
</body>
</html>